<template>
  <div>
    <FormTable :formData="formData"
               :columnData="columnData"
               :editData="editData"
               :url="$api.orders_getlist"
               :is_default_edit="true"
               :is_show_new="false"
               :detail_url="this.$api.orders_info"
               detail_width="30%"
               :pageConfig="pageConfig">
               <template slot="detail_content" slot-scope="scope">
                 <ul class="detail_content">
                   <li class="detail_li" v-for="(item,key,idx) in detailHandler(scope.data)" :key="idx">
                     <span class="detail_li_title">{{item.title}}</span>
                     <span class="detail_li_txt">{{item.value}}</span>
                   </li>
                 </ul>
               </template>
               </FormTable>
  </div>
</template>

<script>
export default {
  data () {
    return {
      formData: [
        {
          name: "card_id",
          label: "卡卷名称",
          value: '',
          type: "select",
          config: {
            filterable: true
          },
          groups: [
          ],
        },
        {
          name: "rights_id",
          label: "权益名称",
          value: '',
          type: "select",
          config: {
            filterable: true
          },
          groups: [
          ],
        },
        {
          name: "nickname",
          label: "用户昵称",
          value: '',
          type: "input",
        },
        {
          name: "coupon_id",
          label: "优惠券名称",
          value: '',
          type: "select",
          config: {
            filterable: true
          },
          groups: [
          ],
        },
        {
          name: "type",
          label: "订单类型",
          value: '',
          type: "select",
          config: {
            filterable: true
          },
          groups: [
          ],
        },
        {
          name: "status",
          label: "支付状态",
          value: '',
          type: "select",
          config: {
            filterable: true
          },
          groups: [
          ],
        },
        {
          name: "num_type",
          label: "编号类型",
          value: '',
          type: "select",
          groups: [
            {
              label:'订单号',
              value:1
            },
            {
              label:'微信订单号',
              value:2
            },
            {
              label:'手机号',
              value:3
            },
          ],
          width:'230px'
        },
        {
          name: "num",
          label: "",
          value: '',
          type: "input",
          width:'200px'
        },
        {
          name: "create_day",
          label: "订单时间",
          value: '',
          type: "date_time_range",
          config: {
            format: 'yyyy-MM-dd HH:mm:ss',
            'value-format': 'yyyy-MM-dd HH:mm:ss',
            align: 'left'
          },
        },
      ],
      columnData: [
        {
          prop: "orders_id",
          label: "订单id"
        },
        {
          prop: "orderNum",
          label: "订单号",
          width:'160px'
        },
        {
          prop: "nickName",
          label: "用户昵称"
        },
        {
          prop: "mobile",
          label: "手机"
        },
        {
          prop: "qd",
          label: "渠道"
        },

        {
          prop: "card_name",
          label: "卡券名称"
        },
        {
          prop: "rights_name",
          label: "权益名称"
        },
        {
          prop: "category_name",
          label: "分类名称"
        },

        {
          prop: "type",
          label: "订单类型"
        },
        {
          prop: "totalMoney",
          label: "支付金额"
        },
        {
          prop: "payMoney",
          label: "支付总金额"
        },
        {
          prop: "cost",
          label: "支付总成本"
        },
        {
          prop: "coupon_title",
          label: "优惠券标题"
        },
        {
          prop: "buyNum",
          label: "成本"
        },
        {
          prop: "status",
          label: "支付状态"
        },
        {
          prop: "success_time",
          label: "支付时间",
          width:'160px'
        },
        {
          prop: "create_time",
          label: "创建时间",
          width:'160px'
        },
        {
          prop: 'btn_group',
          label: '操作',
          custom: true,
          type: 'btn_group',
          width: '200px',
          group: [
            {
              name: '详情',
              type: 'detail',
              color: 'primary',
              url: this.$api.orders_info
            },
          ]
        }
      ],
      editData: [],
      pageConfig: {
        page: 1,
        pagesize: 10,
      }
    };
  },
  created () {
    this.getTopType();
  },
  methods: {
    getTopType () {
      // 获取权益列表
      let req1 = this.$req.get(this.$api.rights_getnopagelist)
      // 获取卡卷列表
      let req2 = this.$req.get(this.$api.card_getnopagelist)
      // 获取优惠券列表
      let req3 = this.$req.get(this.$api.coupon_getnopagelist)
      // 获取订单类型列表
      let req4 = this.$req.get(this.$api.orders_orderstype)
      // 获取订单状态列表
      let req5 = this.$req.get(this.$api.orders_ordersstatus)
      Promise.all([req1, req2,req3,req4,req5]).then(values => {
        this.dataHandler(values[0].data, 0, '', 'name', 'rights_id');
        this.dataHandler(values[1].data, 1, '', 'name', 'card_id');
        this.dataHandler(values[2].data, 3, '', 'title', 'coupon_id');
        this.dataHandler(values[3].data, 4, '', 'orders_type_name', 'orders_type_id');
        this.dataHandler(values[4].data, 5, '', 'orders_status_name', 'orders_status_id');
      })
    },
    dataHandler (data, idx1, idx2, labelKey, valueKey) {
      for (var i in data) {
        if (typeof idx1 == 'number') {
          this.formData[idx1].groups.push({
            label: labelKey ? data[i][labelKey] : data[i],
            value: valueKey ? data[i][valueKey] : data[i]
          })
        }
      }
      console.log(this.editData)
    },
    // 处理详情
    detailHandler(data){
      return [
        {
          title:'订单号',
          value:data.orderNum
        },
        {
          title:'用户昵称',
          value:data.nickName
        },
        {
          title:'手机号码',
          value:data.mobile
        },
        {
          title:'渠道',
          value:data.qd
        },
        {
          title:'卡券名称',
          value:data.card_name
        },
        {
          title:'权益名称',
          value:data.rights_name
        },
        {
          title:'分类名称',
          value:data.category_name
        },
        {
          title:'订单类型',
          value:data.type
        },
        {
          title:'总价',
          value:data.totalMoney
        },
        {
          title:'支付金额',
          value:data.payMoney
        },
        {
          title:'成本价',
          value:data.cost
        },
        {
          title:'优惠券标题',
          value:data.coupon_title
        },
        {
          title:'购买数量',
          value:data.buyNum
        },
        {
          title:'订单状态',
          value:data.status
        },
        {
          title:'微信订单号',
          value:data.transaction_id
        },
        {
          title:'充值账号',
          value:data.chargeAccount
        },
        {
          title:'上游充值订单号',
          value:data.chargeOrder
        },
        {
          title:'创建时间',
          value:data.create_time
        },
        {
          title:'过期时间',
          value:data.expire_time
        },
        {
          title:'支付成功时间',
          value:data.success_time
        },
        {
          title:'权益充值成功时间',
          value:data.charge_stime
        },
        {
          title:'取消时间',
          value:data.cancel_time
        },
      ]
    },
    handleSizeChange (e) {
      console.log(e);
    },
    handleCurrentChange (e) {
      console.log(e);
    },
    submit (e) {
      console.log(e);
    },
    reset (e) {
      console.log(e);
    }
  }
}
</script>

<style lang="scss" scoped>
  .detail_content{
    width: 300px;
    padding: 0;
    margin: 0 auto;
    .detail_li{
      display: flex;
      justify-content: space-between;
    }
  }
</style>